<template>
  <div class="box">
    <div class="condition">
      <div>时间查询</div>
      <div>
        <div class="block">
          <el-date-picker v-model="riqi" value-format="yyyy-MM-dd HH:mm" type="datetimerange" align="right"
            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
      </div>
      <div>传感器类型</div>
      <div>
        <el-select v-model="Jclx" placeholder="请选择传感器类型" @change="typelist">
          <el-option v-for="item in options" :key="item.ID" :label="item.SensortypeType" :value="item.SensortypeType">
          </el-option>
        </el-select>
      </div>

      <div style="color: white; font-size: 14px;">安装位置</div>
      <div>
        <el-select v-model="WeiZhi" placeholder="请选择">
          <el-option v-for="item in WeiZhiList" :key="item.ID" :label="item.location" :value="item.location">
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 5px;"><el-button type="warning" @click="Query">查询</el-button></div>
      <!-- <div><el-button type="success" plain>重置</el-button></div> -->
      <div>
        <el-button style="
            background-color: rgb(40, 103, 185);
            border-color: rgb(40, 103, 185);
            color: white;
            margin-left: 7px;
          " size="max" class="el-icon-printer" @click="printJson">打印</el-button>
      </div>
      <el-button style="
          background-color: rgb(179, 225, 157);
          border-color: rgb(179, 225, 157);
          color: white;
          margin-left: 7px;
          width: 40;
          display: flex;
        " size="min" class="el-icon-printer" @click="Export">
        <xslx ref="xslx" />导出
      </el-button>


    </div>

    <div class="Tbale">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{
            background: 'rgb(40,103,185)',
            color: 'white',
            borderColor: 'rgb(43,88,144)',
            'text-align': 'center',
          }" :cell-style="{ 'text-align': 'center' }" height="400" style="width: 100%; padding: 0; height: 400px">
        <el-table-column prop="location" label="安装位置" width="350">
        </el-table-column>
        <el-table-column prop="unit" label=" 计量单位" width="100"> </el-table-column>
        <el-table-column prop="state" label="测点状态" width="100"> </el-table-column>
        <el-table-column prop="max" label="最大值" width="100"> </el-table-column>
        <el-table-column prop="Avgvalue" label="平均值" width="100"> </el-table-column>
        <el-table-column prop="min" label=" 最小值" width="100"> </el-table-column>
        <el-table-column prop="miningGroup" label="分组" width="100"> </el-table-column>
        <el-table-column prop="time" label="时间" width=""> </el-table-column>
        <el-table-column prop="Info" label="总结" show-overflow-tooltip width=""> </el-table-column>
      </el-table>
      <div class="block1" style="width: 100%; height: 45px; text-align: right">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
          :current-page="currentPage4" :page-sizes="[pageSize]" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <div>
      <div class="echart11" id="mychart11" style="width: 100%; height: 300px"></div>
    </div>

    <el-dialog class="dialog" title="预览" @open="handleDialogOpen" :visible.sync="StaticBoard" width="80%">
      <div style=" width: 100%; display: flex; justify-content: flex-end">
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="StaticBoard = false">取 消</el-button>
      </div>
      <div id="printView">
        <div style="page-break-after:always" class="box">
          <div id="produceRadio2" style="width: 1200px; height: 300px; margin: 0 auto;"> </div>
          <div class="table">
            <table id="printable-table" style="width: 95%;margin: 0 auto; border-collapse: collapse;">
              <thead>
                <tr>
                  <th style="padding: 5px 10px; border: 1px solid #333;">安装位置</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">计量单位</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">测点状态</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">最大值</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">平均值</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">最小值</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 70px;">分组</th>
                  <th style="padding: 5px 10px; border: 1px solid #333;width: 100px;">时间</th>
                  <th style="padding: 5px 10px; border: 1px solid #333;width: 100px;">总结</th>
                  <!-- 其他表头 -->
                </tr>

              </thead>
              <tbody>
                <!-- 表格数据行 -->
                <tr v-for="(item, index) in tableData" :key="index">
                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.location
                    }}</td>
                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.unit
                    }}</td>

                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.state
                    }}</td>

                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.max
                    }}</td>


                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.Avgvalue
                    }}</td>


                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95); text-align: center;">
                    {{ item.min
                    }}</td>


                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.miningGroup
                    }}</td>


                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.time
                    }}</td>

                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95); width: 20%; text-align: center;">
                    {{ item.Info
                    }}</td>
                  <!-- 其他数据 -->
                </tr>

              </tbody>
            </table>
          </div>
          <div style="width: 90%; margin: 0 auto;">
            <div style="font-weight: 900; "> 总结：</div>

            <div style="margin-left: 25px;"> {{ baoGaoText }}</div>
          </div>
          <div class="sign">

            <div>
              <div>操作人签字：</div>
              <div></div>
            </div>

            <div>
              <div>审核人签字：</div>
              <div></div>
            </div>


            <div>
              <div>负责人签字：</div>
              <div></div>
            </div>



          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
       
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="StaticBoard = false">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import xslx from "../../components/xslx.vue";
import bus from '../../components/bus'
import * as echarts from "echarts";

import { TypeHuoQuAnZhuangJiDian, lishixinxiChaWeiZhi, dingbanbaobiaozhou, dingbanshebeichuanganqipeizhilist, dingbanlishixinxiTypefanhuiweizhi, } from '../../https/api/user'
export default {
  components: { xslx },
  data() {
    return {
      StaticBoard: false,
      msg: "打印",
      printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        popTitle: '周报表打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        extraHead: '', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
        previewTitle: '', // 打印预览的标题(预览模式preview为true时才显示)
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback(that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
      pageSize: 14,
      currentPage: 1,
      currentPage4: 1,
      Jclx: "",
      riqi: "",
      WeiZhi: '',
      hangdao: '',
      WeiZhiList: [],
      options: [],
      tableData: [],
      RiZheXian: [],
      yujing: "",
      baojing: "",
      Num: '',
      // shuncao:[
      //  {
      //   value:'上顺槽'
      //  },
      //  {
      //   value:'下顺槽'
      //  },
      // ],
      scList: [

      ],
      baoGaoText: ''
    };
  },
  mounted() {
    this.baojingType();
  

  },
  methods: {
    async typelist() {
      const data = {
        type: this.Jclx
      }
      const res = await lishixinxiChaWeiZhi(data)
      console.log('根据传感器类型 返回传感器安装位置', res);
      this.WeiZhiList = res
    },

    initEcharts() {
      // 基本柱状图
      var option = {
        // backgroundColor: "#FFF0F5",

        legend: {
          textStyle: {
            color: [],
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: 35,
          left: 60,
          right: 30,
          bottom: 45,
        },

        // 提示框
        tooltip: {
          formatter: function (params) {
            console.log(params);
            return params.location + params.max;
          }
        },

        //工具框，可以选择
        tooltip: {
          show: true,
        },
        xAxis: {
          name: "",
          type: "category",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "rgb(83,249,209)",
            },
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 0, //代表逆时针旋转
          },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          data: this.RiZheXian.map((i) => i.location),
          // data:['1','2','3','4','5','6',],

        },
        dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            startValue: 0, // 从头开始。
            endValue: 9,  // 最多5个
            handleSize: 0,
            showDataShadow: false
          },
        ],
        // yAxis: {
        //   show: true,
        //   name: "",
        //   type: "value",
        //   min: 0, // 设置y轴刻度的最小值
        //   max: this.Num, // 设置y轴刻度的最大值
        //   splitNumber: 5, // 设置y轴刻度间隔个数
        //   axisLine: {
        //     lineStyle: {
        //       // 设置y轴颜色
        //       color: "#87CEFA",
        //     },
        //   },
        //   splitLine: {
        //     show: true,
        //     lineStyle: {
        //       color: "#87CEFA",
        //       type: "dashed",
        //     },
        //   },
        // },
        yAxis: [
          {
            type: 'value',
            min: 0,

          },
          {
            type: 'value',
            min: 0,
            // interval: 5,
          }
        ],

        series: [
          {

            data: this.RiZheXian.map((i) => i.max),
            // data:[12,32,43,12,41,21,],
            type: "bar",
            barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%
            lineStyle: {
              width: 5 // 设置线条宽度为3
            },
            markLine: {
              symbol: ['none', 'none'],    //表示箭头从左向右
              label: {
                show: true,
                position: "middle",    //将警示值放在哪个位置，start middle end 开头 中间 结尾
                //formatter: "60%",   //警示线上显示内容

              },
              data: [
                {
                  name: "报警线",
                  yAxis: this.baojing,
                  // yAxis: 30,
                  lineStyle: {
                    color: "#f33",
                    type: "solid",
                    width: 3,
                  },
                  label: {
                    fontSize: 15,
                    color: 'red',
                    formatter: (e) => { return '报警线' }
                  }
                },
                {
                  name: "预警线",
                  yAxis: this.yujing,
                  // yAxis: 20,
                  lineStyle: {
                    color: "yellow",
                    type: "solid",
                    width: 3,
                  },
                  label: {
                    fontSize: 15,
                    color: 'yellow',
                    formatter: (e) => { return '预警线' }
                  }
                },

              ],
            },
          },
          {
            type: 'line',
            label: { show: true },
            data: this.RiZheXian.map((i) => i.max),
            lineStyle: {
              width: 2 // 设置线条宽度为3
            },
            // data:[12,32,43,43,12,43,23]
          }
        ],

        // color: ["rgb(83,249,209)"],
      };
      const myChart = echarts.init(document.getElementById("mychart11"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    produceRadiooo() {
      // 基本柱状图
      var option = {
        // backgroundColor: "#FFF0F5",

        legend: {
          textStyle: {
            color: [],
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: 35,
          left: 50,
          right: 30,
          bottom: 35,
        },

        // 提示框
        tooltip: {
          formatter: function (params) {
            console.log(params);
            return params.location + params.max;
          }
        },

        //工具框，可以选择
        tooltip: {
          show: true,
        },
        xAxis: {
          name: "",
          type: "category",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "rgb(83,249,209)",
            },
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: -15, //代表逆时针旋转
          },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          data: this.RiZheXian.map((i) => i.location),


        },
        dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            start: 0, //初始化时，滑动条宽度开始标度
            end: 50, //初始化时，滑动条宽度结束标度
          },
        ],

        yAxis: [
          {
            type: 'value',
            min: 0,
            // max:200

          },
          {
            type: 'value',
            min: 0,
            // interval: 5,
          }
        ],

        series: [
          {
            type: 'bar',
            data: this.RiZheXian.map((i) => i.max),
            barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%
            lineStyle: {
              width: 5 // 设置线条宽度为3
            },
            markLine: {
              symbol: ['none', 'none'],    //表示箭头从左向右
              label: {
                show: true,
                position: "middle",    //将警示值放在哪个位置，start middle end 开头 中间 结尾
                //formatter: "60%",   //警示线上显示内容

              },
              data: [
                {
                  name: "报警线",
                  yAxis: this.baojing,
                  // yAxis: 30,
                  lineStyle: {
                    color: "#f33",
                    type: "solid",
                    width: 3,
                  },
                  label: {
                    fontSize: 15,
                    color: 'red',
                    formatter: (e) => { return '报警线' }
                  }
                },
                {
                  name: "预警线",
                  yAxis: this.yujing,
                  // yAxis: 20,
                  lineStyle: {
                    color: "yellow",
                    type: "solid",
                    width: 3,
                  },
                  label: {
                    fontSize: 15,
                    color: 'yellow',
                    formatter: (e) => { return '预警线' }
                  }
                },

              ],
            },
          },
          {
            type: 'line',
            label: { show: true },
            data: this.RiZheXian.map((i) => i.max),
            lineStyle: {
              width: 2 // 设置线条宽度为3
            },

          }
        ],

        // color: ["rgb(83,249,209)"],
      };
      const myChart = echarts.init(document.getElementById("produceRadio2"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    handleSizeChange1(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    handleSizeChange(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    baojingType() {
      const data = {
        w: 1,
      };
      dingbanshebeichuanganqipeizhilist(data).then((res) => {
        console.log("传感器类型类型", res);
        if (res) {
          this.options = res;
        }
      });
    },
    Query() {
      console.log(this.riqi);
      const data = {
        startTimes: this.riqi[0],
        EndTime: this.riqi[1],
        Type: this.Jclx,
        location: this.WeiZhi,


      }
      dingbanbaobiaozhou(data).then(res => {
        console.log('周报', res);
        if (res) {
          this.tableData = res[0].Exceldatas;
          this.RiZheXian = res[0].ZhuZhuangTus;
          this.yujing = res[0].Yujing;
          this.baojing = res[0].Baojing;
          this.Num = res[0].Num
          this.baoGaoText = res[0].AlarmInfo

        }
        this.initEcharts();

      })
    },
    printJson() {
      this.StaticBoard = true
      const data = {
        startTimes: this.riqi[0],
        EndTime: this.riqi[1],
        Type: this.Jclx,

        location: this.WeiZhi,


      }
      dingbanbaobiaozhou(data).then(res => {
        console.log('周报', res);
        if (res) {
          this.tableData = res[0].Exceldatas;
          this.RiZheXian = res[0].ZhuZhuangTus;
          this.yujing = res[0].Yujing;
          this.baojing = res[0].Baojing;
          this.Num = res[0].Num
          this.baoGaoText = res[0].AlarmInfo

        }


      })
    },
    Export() {
      bus.$emit('leixing', this.riqi, this.Jclx)
      const data = [
        [
          "安装位置",
          "计量单位",
          "测点状态",
          "最大值",
          "平均值",
          "最小值",
          "分组",
          "时间",
        ],
      ];
      this.tableData.forEach((item) => {
        data.push([
          item.location,
          item.unit,
          item.state,
          item.max,
          item.Avgvalue,
          item.min,
          item.miningGroup,
          item.time,
        ]);
      });

      this.$refs.xslx.xslx(data);
    },
    handleDialogOpen() {
      //dom完全挂载后调用
      this.$nextTick(() => {
        this.produceRadiooo()
      })

    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 0 20px;

  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      color: white;
      font-size: 14px;
    }

    >div:nth-child(2) {
      margin-left: 7px;
    }

    >div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(4) {
      margin-left: 7px;
    }

    >div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(6) {
      margin-left: 7px;
    }

    >div:nth-child(7) {
      margin-left: 7px;
    }

    >div:nth-child(8) {
      margin-left: 7px;
    }
  }

}

::v-deep .el-table,
.el-table__expanded-cell {
  // padding: 20px !important;
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

/deep/.el-table td.el-table__cell {
  border-bottom: none !important;
}

/* 取消el-table鼠标移入高亮 */
div /deep/ .el-table tbody tr:hover>td {
  background: #ccc !important;
}

div /deep/ .el-table tbody tr {
  pointer-events: none;
}

::v-deep .el-form-item__label {
  color: white !important;
}

.picker {
  height: 40px;
  background-color: rgb(14, 26, 55);

  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}

::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}

::v-deep .el-table__fixed {
  // 左固定列
  height: auto !important;
  bottom: 12px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些,这个根据实际情况改
}

::v-deep .el-table__fixed-right {
  // 右固定列
  height: auto !important;
  bottom: 12px;
}

/deep/ .el-table__body-wrapper {
  height: 750px;
  /* 滚动条整体高 必须项 */
  border-right: none;
  overflow-y: scroll;
  /* overflow-y为了不出现水平滚动条*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  /* 滚动条的宽高 必须项 */
  height: 10px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #409eff;
  /*滚动条的背景颜色*/
}

::v-deep.el-date-editor .el-range-input {
  background-color: rgb(14, 26, 55);
  //日期背景色
}

.index-box {
  padding: 0 1px 0 0;
}

@media print {
  border: 1px solid red;

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {

    padding: 8px;
    text-align: center;
  }

  thead {
    display: table-header-group;
    /* 表头始终显示 */
  }

  tfoot {
    display: table-footer-group;
    /* 表尾始终显示 */
  }

  tr {
    page-break-inside: avoid;
    /* 避免在页面断裂时打断表行 */
  }
}


#printView {
  width: 99%;
  margin: 0 auto;
}

#produceRadio {
  width: 90%;
  height: 300px;
  margin: 0 auto;
}

#produceRadioo {
  width: 90%;
  height: 300px;
  margin: 0 auto;
}

.table {
  width: 90%;
  margin: 20px auto;
}

.sign {
  width: 90%;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  >div {
    width: 220px;
    display: flex;
    margin: 0 10px;

    >div:nth-child(1) {
      width: 45%;
      text-align: right;
    }

    >div:nth-child(2) {
      width: 55%;
      border-bottom: 1px solid black;
    }
  }
}
</style>